<template>
	<view class="login">
		<view class="loginDef">
			<view class="tour font10" @click="tourModule">游客模式</view>
			<image src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/login/loginDef2.png" mode="widthFix">
			</image>
		</view>
		<view class="flex justify-center bold color333 u-m-t-10 align-end">
			<view class="u-font-40">{{mineProgramTitle || '新助邦'}}</view>
			<view class="u-p-l-10 u-p-r-10 u-font-32">-</view>
			<view class="u-font-32">{{mineProgramSubTitle || '考研择校调剂上岸之神'}}</view>
		</view>
		<view class="position-relative">
			<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="u-reset-button logonBtn">
				<u-icon class="u-m-r-10" size="40"
					name="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/12/15/1bd4f6dcb12b496bb01c35e198a89c2a.png"></u-icon>
				手机号授权快速登录</button>
			<view v-if="!agree" class="logonBtnMask" @click="decryptPhoneNumber"></view>
			<view class="flex align-center justify-center u-font-24 color666 u-m-b-20 u-m-t-30">
				<view class="u-m-r-40" @click="changeLoginType(2)">短信验证码登录</view>
				<view class="u-m-l-40" @click="changeLoginType(1)">账号密码登录</view>
			</view>

		</view>
		<view class="three w-100">
			<view class="u-font-28 color333 flex align-center justify-center u-m-t-60" @click="agreeClick">
				<checkbox :checked="agree" class="agreeCheck" style="transform:scale(0.8)" />
				我已知晓并同意
				<text class="text-main-color" @click.stop="toService('service')">《用户协议》</text>
				和
				<text class="text-main-color" @click.stop="toService('personal')">《隐私协议》</text>
			</view>
			<view class="flex align-center justify-center w-100 u-font-28 color999 u-m-t-40">
				<text class="herf-color" @click="toForget">忘记密码</text>，快速
				<text class="herf-color" @click="toRegiste">注册</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mobile,
		password
	} from "@/utils/verification.js"
	import {
		login,
		wxGetPhone
	} from "@/api/login.js"
	import {
		getWxCode,
		getDyCode
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				loginForm: {
					appType: '',
					loginType: '',
					password: '',
					username: '',
					invitationCode: ''
				},
				verForm: {
					loginType: '',
					appType: '',
					phoneNumber: '',
					verificationCode: '',
					invitationCode: ''
				},
				loginType: 1,
				showPass: false,
				agree: false,
				wxCode: '',
				mineProgramTitle: "",
				mineProgramSubTitle: ""
			}
		},
		onShow() {
			// 清空跳转标记（此字段用来防止多次跳转到登录页）
			uni.removeStorageSync('navigateLogin')
			if (uni.getStorageSync('mineProgramSys')) {
				let obj = JSON.parse(uni.getStorageSync('mineProgramSys'));
				this.mineProgramTitle = obj.mineProgramTitle;
				this.mineProgramSubTitle = obj.mineProgramSubTitle;
			}
		},
		methods: {
			changeLoginType(type) {
				uni.navigateTo({
					url: '/pages/login/account/account?type=' + type,
				});
			},
			agreeClick() {
				this.agree = !this.agree
			},
			// 调用登录API(只有微信获取手机号登录才有type和loginData)
			loginApi(type, loginData) {
				let loginType = type ? type : (this.loginType == 1 ? 'PASSWORD' : 'SHORT_MESSAGE')
				let param = (this.loginType == 1 ? this.loginForm : this.verForm)
				if (type == 'BIND_PHONE') {
					// 微信获取手机号
					param = {
						"loginType": loginType,
						"uuid": loginData.uuid,
						"extraData": {
							"encryptedData": loginData.encryptedData,
							"iv": loginData.iv
						},
						"appType": 1,
						"phoneNumber": loginData.phoneNumber,
						"invitationCode": this.loginForm.invitationCode || this.verForm.invitationCode || ''
					}
				} else if (type == 'PHONE_QUICK') {
					param = {
						"phoneNumber": loginData.phoneNumber,
						"phoneQuickParam": {
							"accessToken": loginData.access_token,
							"openId": loginData.openid
						},
						"invitationCode": this.loginForm.invitationCode || this.verForm.invitationCode || ''
					}
				}
				// #ifdef MP
				param.appType = 1
				// #endif
				param.loginType = loginType //this.loginType==1?'PASSWORD':'SHORT_MESSAGE'
				// #ifdef MP
				if (!type) {
					param.wechatCode = this.wxCode
				}
				// #endif
				// 若是通过扫校园推广者的分享码进入的需要绑定二者之间的关系
				if (uni.getStorageSync("shareUserId")) {
					param.u = uni.getStorageSync("shareUserId")
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				login(param).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						if (type == 'PHONE_QUICK') {
							uni.closeAuthView()
						}
						uni.setStorageSync('token', res.data.access_token)
						uni.setStorageSync('userId', res.data.userId)
						if (uni.getStorageSync('prePath')) {
							// 跳转回之前进入的页面
							// #ifdef MP
							let url = decodeURIComponent(uni.getStorageSync('prePath'))
							// #endif
							uni.removeStorageSync('prePath')
							if (url.indexOf('index/index') != -1 || url.indexOf('schoolMain/schoolMain') != -1 || url.indexOf(
									'major/major') != -1 || url.indexOf('mineMain/mineMain') != -1) {
								uni.switchTab({
									url: url
								})
							} else {
								uni.redirectTo({
									url: url
								})
							}
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				}).catch((err) => {
					uni.hideLoading()
				})

			},
			toRegiste() {
				uni.navigateTo({
					url: '/registePages/pages/registe'
				})
			},
			toForget() {
				uni.navigateTo({
					url: '/pages/login/forgetPass/forgetPass'
				})
			},
			toService(type) {
				uni.navigateTo({
					url: '/pages/service/service?type=' + type
				})
			},
			// 游客模式
			tourModule() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 微信获取手机号登录登录
			decryptPhoneNumber(e) {
				if (!this.agree) {
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意相关政策'
					})
					return
				}
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '登录中',
						mask: true
					})
					getWxCode().then((code) => {
						this.wxCode = code
						let nowObj = {
							"loginType": "WECHAT_APPLET",
							"appType": 1,
							"authCode": this.wxCode
						}
						if (uni.getStorageSync("shareUserId")) {
							nowObj.u = uni.getStorageSync("shareUserId")
						}
						login(nowObj).then((res) => {
							uni.hideLoading()
							if (res.code == 100000) {
								uni.setStorageSync('token', res.data.access_token)
								// 因为这个接口要进行token验证，所以需要拿微信code先调用一次登录拿到token
								wxGetPhone({
									code: e.detail.code
								}).then((res2) => {
									let wxdata = Object.assign({
										phoneNumber: JSON.parse(res2.msg).phone_info.phoneNumber,
										uuid: res.data.uuid
									}, e.detail)
									this.loginApi('BIND_PHONE', wxdata)
								})
							}
						}).catch((err) => {
							uni.hideLoading()
						})
					})
				}
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/public.scss";

	.login {
		box-sizing: border-box;

		.loginDef {
			text-align: right;
			padding: 96rpx 30rpx 0; //48rpx 0 0;
			position: relative;
			height: 400rpx;
			/* #ifdef MP */
			height: 496rpx;
			/* #endif */
			overflow: hidden;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 100%;
				display: block;
				margin: -96rpx auto 0;
				/* #ifdef MP */
				margin: 0 auto;
				/* #endif */
			}

			.tour {
				position: absolute;
				right: 36rpx;
				top: 96rpx; //48rpx
				/* #ifdef MP */
				top: 150rpx;
				/* #endif */
				border: 1px solid #E5E5E5;
				width: 130rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				border-radius: 30rpx;
				z-index: 10;
			}
		}



		.agreement {
			margin: 86rpx 0 0;

			&>view {
				margin: 0 auto;
			}

			::v-deep .uni-checkbox-input {
				color: $colorMain !important;
			}

			::v-deep .uni-checkbox-input:hover {
				border-color: $colorMain !important;
				;
			}
		}
	}

	.logonBtn {
		background-color: #F7DD5E;
		color: #333;
		font-size: 32rpx;
		width: 634rpx;
		height: 86rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 200rpx auto 0;
	}

	.logonBtnMask {
		position: absolute;
		background-color: rgba(255, 255, 255, 0);
		height: 86rpx;
		width: 634rpx;
		border-radius: 12rpx;
		left: 50%;
		top: 0;
		transform: translate(-50%);
	}

	.three {
		position: fixed;
		bottom: 10vh;
		left: 50%;
		transform: translate(-50%);
	}
</style>